<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <header>
        【iPhoneXR】微信对话生成 -
        <span class="sub-title">可滚动聊天记录</span>
      </header>
      <div class="section">
        <div class="left-options">
          <ul class="tab" @click="toggle($event)">
            <li
              name="facede"
              :class="['tab-item',activeName==='facede'?'active':'']"
            >
              外观设置
            </li>
            <li
              name="dialogue"
              class="tab-item"
              :class="['tab-item',activeName==='dialogue'?'active':'']"
            >
              对话设置
            </li>
          </ul>
          <transition-group name="list" tag="div">
            <div class="facede_content" v-show="activeName==='facede'" :key="1">
              444
            </div>
            <div
              class="dialogue_content"
              v-show="activeName==='dialogue'"
              :key="2"
              ref="dialogueContent"
            >
              <div class="date">
                <p>添加聊天时间:</p>
                <el-date-picker
                  size="small"
                  v-model="resDate.date"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy年MM月dd日"
                >
                </el-date-picker>
              </div>
              <div class="week">
                <span>星期</span>
                <el-select
                  size="small"
                  v-model="resDate.week"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in weekDate"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
                <el-select
                  size="small"
                  v-model="resDate.timeFrame"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in timeFrame"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="time">
                时间
                <el-time-picker
                  class="time"
                  size="small"
                  v-model="resDate.time"
                  format="HH:mm"
                  value-format="HH:mm"
                  placeholder="任意时间点"
                >
                </el-time-picker>
              </div>
              <div class="submit">
                <el-button type="primary" size="small" @click="submitTime"
                  >添加</el-button
                >
              </div>
              <div class="line"></div>
              <div class="add_user" v-for="item in setList" :key="item.id">
                <div class="left_user_photo">
                  <input type="file" @change="uploadUserFile($event,item)" />
                  <img v-if="item.user_img" :src="item.user_img" alt="" />
                </div>
                <div class="right_user_content">
                  <div class="user_name">
                    <span class="label">用户名:</span>
                    <input type="text" v-model="item.username" />
                  </div>
                  <div class="chat_content">
                    <span class="label">聊天内容:</span>
                    <textarea v-model="item.content"></textarea>
                  </div>
                  <div class="money">
                    <span class="label">转账/收钱金额:</span>
                    <input type="number" v-model="item.money" />
                  </div>
                  <div class="say_time">
                    <span class="label">语音时间:</span>
                    <input type="number" v-model="item.sayTime" />
                  </div>
                  <div class="btn">
                    <button>随机用户名</button>
                    <button>随机头像</button>
                  </div>
                  <div class="img_dialog">
                    <input type="file" @change="uploadChatFile($event,item)" />
                    <img v-if="item.img" :src="item.img" alt="" />
                  </div>
                  <div class="btns">
                    <el-button
                      type="primary"
                      size="small"
                      @click="addChat(item)"
                      >添加【文字】对话</el-button
                    >
                    <el-button
                      type="primary"
                      size="small"
                      @click="addChatImg(item)"
                      >添加【图片】</el-button
                    >
                    <el-button type="primary" size="small"
                      >添加【收钱】</el-button
                    >
                    <el-button type="primary" size="small"
                      >添加【语音】</el-button
                    >
                    <el-button
                      :type="item.isMain?'success':'primary'"
                      size="small"
                      @click="setMain(item)"
                      >设为主人</el-button
                    >
                    <el-button type="danger" size="small">删除用户</el-button>
                  </div>
                </div>
              </div>
              <el-button type="success" size="small" @click="addUser"
                >添加用户</el-button
              >
              <el-button type="success" size="small" @click="clearChat"
                >清除对话</el-button
              >
            </div>
          </transition-group>
        </div>
        <div class="right-preview" :style="{height:setHeight}">
          <div class="chat-container">
            <header>
              <div class="p-time">15:39</div>
              <div class="p-icon">
                <div class="p-sigle"></div>
                <div class="p-wifi"></div>
                <div class="p-dc">
                  <i class="progress-container">
                    <em></em>
                  </i>
                </div>
              </div>
              <div class="tool-bar">
                <div class="left-back">
                  <div class="back"></div>
                  <div class="num">3</div>
                </div>
                <div class="center-name">宝宝</div>
                <div class="right-more">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
            </header>
            <ul class="chat-list">
              <template v-for="item in chatList" :key="">
                <li class="time" v-if="item.type==='date'">
                  <a class="close" @click="close(item)"></a>
                  <span class="text"
                    >{{item.date}} {{item.time}} {{item.week}}
                    {{item.timeFrame}}</span
                  >
                </li>
                <li class="left-chat" v-else-if="item.type==='other'">
                  <a class="close" @click="close(item)"></a>
                  <img :src="item.icon" class="chat-img"  alt="" />
                  <img :src="item.chatImg" class="chat_send_img" v-if="item.chatImg"></img>
                  <div class="chat" v-else>
                    <span class="text" >{{item.text}}</span>
                  </div>
                </li>
                <li class="right-chat" v-if="item.type==='self'">
                  <a class="close" @click="close(item)"></a>
                  <img :src="item.chatImg" class="chat_send_img" v-if="item.chatImg"></img>
                  <div style="overflow: hidden" v-else>
                    <div class="chat" >
                      <span class="text" >{{item.text}}</span>
                    </div>
                  </div>
                  <img :src="item.icon" class="chat-img" alt="" />
                </li>
              </template>
            </ul>
            <div class="footer"></div>
          </div>
        </div>
      </div>
      <footer>
        <el-button type="primary" @click="createImg" size="small">生成图片</el-button>
      </footer>
    </div>
    <div class="content"></div>
    <script src="./js/vue.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/html2canvas.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      let vm = new Vue({
        el: "#app",
        watch: {
          resDate(value) {
            console.log(value);
          },
        },
        data: {
          activeName: "dialogue",
          resDate: {
            week: "星期一",
            timeFrame: "上午",
            date: "",
            time: "",
          },
          setList: [
            {
              id: 1,
              username: "xxx",
              content: "",
              money: 88.88,
              sayTime: 10,
              img: "",
              isMain: true,
              user_img: "./img/10009.jpg",
            },
          ],
          setHeight: 0,
          chatList: [
            {
              id: 2,
              type: "self",
              text: "45632111111范德萨后即可范德萨和打开局汇顶科技撒谎大家开撒谎的空间三环大开杀戒啊哈大开杀戒大开杀戒啊哈的沙口路dsadsadsadasdsadsas",
              icon: "./img/10060.jpg",
            },
          ],
          weekDate: [],
          timeFrame: ["-", "昨天", "上午", "下午", "凌晨"],
        },
        mounted() {
          this.setHeight = this.$refs.dialogueContent.clientHeight + "px";

          this.generateData();
        },

        methods: {
          createImg(){
            let closes = document.querySelectorAll('.close')
            for (let i = 0; i < closes.length; i++) {
              const element = closes[i];
              element.style.display='none'
            }
            html2canvas(document.querySelector('.chat-container')).then(canvas => {
              const imgUrl = canvas.toDataURL()
              const image = document.createElement('img')
              image.src = imgUrl
              const a = document.createElement('a')
              a.href = imgUrl
              // a.download 后面的内容为自定义图片的名称
              a.download = 'study_download'
              a.click()
              for (let i = 0; i < closes.length; i++) {
              const element = closes[i];
              element.style.display='block'
            }
	         })
          },
          addChatImg(item) {
            if (!item.img) return;
            let id;
            this.chatList.length === 0
              ? (id = 1)
              : (id = this.chatList[this.chatList.length - 1].id + 1);
            this.chatList.push({
              id,
              type: item.isMain ? "self" : "other",
              chatImg: item.img,
              icon: item.user_img,
            });
          },
          addChat(item) {
            if(!item.content) return 
            let id;
            this.chatList.length === 0
              ? (id = 1)
              : (id = this.chatList[this.chatList.length - 1].id + 1);
            console.log(id);
            this.chatList.push({
              id,
              type: item.isMain ? "self" : "other",
              text: item.content,
              icon: item.user_img,
            });
          },
          async uploadUserFile(e, item) {
            try {
              const file = e.target.files[0];
              const res = await imgToBase64(file);
              item.user_img = res;
            } catch (error) {
              console.log(error);
            }
          },
          async uploadChatFile(e, item) {
            try {
              const file = e.target.files[0];
              const res = await imgToBase64(file);
              item.img = res;
            } catch (error) {
              console.log(error);
            }
          },
          addUser() {
            let id;
            this.setList.length === 0
              ? (id = 1)
              : (id = this.setList[this.setList.length - 1].id + 1);
            console.log(id);
            this.setList.push({
              id,
              username: randName(),
              content: "",
              money: 88.88,
              sayTime: 10,
              img: "",
              isMain: false,
              user_img: "",
            });
            this.$nextTick(() => {
              this.setHeight = this.$refs.dialogueContent.clientHeight + "px";
            });
          },
          clearChat() {
            this.chatList = [];
          },
          // 设为主人
          setMain(item) {
            this.setList.map((val) => {
              val.isMain = false;
            });
            item.isMain = true;
          },
          generateData() {
            let week = ["一", "二", "三", "四", "五", "六", "日"];
            for (let i = 0; i < 7; i++) {
              this.weekDate.push("星期" + week[i]);
            }
          },
          toggle(e) {
            let name = e.target.getAttribute("name");
            this.activeName = name;
          },
          submitTime() {
            let id =
              this.chatList.length === 0
                ? 1
                : Number(this.chatList[this.chatList.length - 1].id) + 1;
            this.chatList.push({
              id,
              type: "date",
              ...this.resDate,
            });
          },
          close(item) {
            let index = this.chatList.findIndex((val) => val.id === item.id);
            this.chatList.splice(index, 1);
          },
        },
      });
    </script>
  </body>
</html>
